<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            display: flex;
        }
        ul li {
            flex-shrink: 0;
            width: 80px;
            height: 50px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
        }
        ul li.active {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <ul>
        <li data-code="49">1</li>
        <li data-code="50">2</li>
        <li data-code="51">3</li>
        <li data-code="52">4</li>
        <li data-code="53">5</li>
        <li data-code="54">6</li>
        <li data-code="55">7</li>
        <li data-code="56">8</li>
        <li data-code="57">9</li>
    </ul>

    <script>
        // 要求：
            // 监听键盘事件的变化
            // 根据键值码设置相应的标签背景色高亮

        // 编码：
        // 1.0 获取相关的元素
        var aLi = document.querySelectorAll("ul li");
        // keydown  事件类型
        // 监听键盘事件
        document.addEventListener("keydown",function(event){
            // 获取键值码
            var keyCode = event.keyCode;
            // console.log(keyCode);
            // 循环aLi标签数组
            for(var i = 0 ; i < aLi.length ; i ++){
                // 排他思想
                aLi[i].className = "";
                // 判断data-code是否与键值码对应
                if(aLi[i].dataset.code == keyCode){
                    // 设置对应标签的类名
                    aLi[i].className = "active";
                }
            }
        })

    </script>
</body>
</html>